/*
Theme Name: DouPHP Default
Theme URI: http://demo.douco.com/
Description: DouPHP 默认模板
Version: 1.0
Author: DouCo Co.,Ltd.
Author URI: http://www.douco.com/
*/
/* 初始化
----------------------------------------------- */
body{font-family: Microsoft Yahei, \5FAE\8F6F\96C5\9ED1, \5b8b\4f53, Arial, Lucida, Verdana, Helvetica, sans-serif; color: #555; background-color: #fff;}
body, button, input, textarea{font-size: 12px; line-height: 1.531; outline: none; margin: 0; padding: 0; border: 0;}
p, ul, ol, dl, dt, dd, form, blockquote{margin: 0; padding: 0;}
a{text-decoration: none; color: #333333;}
a:hover{text-decoration: underline; color: #0065B0;}
ul, ol{list-style: none;}
h1, h2, h3, h4, h5, h6{font-size: 12px; margin: 0; padding: 0;}
input, select{font-family: Microsoft Yahei; vertical-align: middle;}
em, b, i{font-style: normal; font-weight: normal;}
img{vertical-align: middle; border: 0;}
label{cursor: pointer;}
.red{ color: #e00; }
.blue{ color: #0054a3;}
/* 主体框架
----------------------------------------------- */

#wrapper{ min-width: 1200px; overflow: hidden; padding-top:80px;}
#wrapper .wrap{width: 1200px; margin: 0px auto; z-index:99; }
#wrapper .wrap::after{ content: ""; display: block; clear: both;}
#wrapper .mb{margin-bottom: 50px;}
/* -- page -- */
#pageLeft{float: left; width: 180px; margin-right: 20px;}
#pageIn{float: left; width: 780px; overflow: hidden;}
/* -- index -- */
#indexLeft{float: left; width: 600px;}
#indexRight{float: right; width: 360px; text-align: left;}


/* 头部导航
----------------------------------------------- */
/* -- top -- */
#top{background-color: #fcfcfc; height: 30px; border-bottom: 1px solid #D8D8D8; text-align: right; color: #CCC;}
#top a{height: 28px; line-height: 28px; color: #555;}
#top s{top: 9px; left: 0; width: 0; height: 12px; border-left: 1px solid #DDD; overflow: hidden;}
/* userTop */
#top .userTop{float:left;}
#top .userTop s{margin:0 12px;}
/* topNav */
#top .topNav{ position: relative; z-index: 1000; height: 30px; float: right; margin-right:-5px;}
#top .topNav li{border-bottom: 0; float: left; zoom: 1; text-align: center;}
#top .topNav li a{padding: 0 12px;}
#top .topNav li.hover{position: relative; background: #FFFFFF; border: 1px solid #DDDDDD; border-bottom: 0;}
#top .topNav li.hover s{border-left: 1px solid #FFF;}
#top .topNav ul{background: #FFFFFF; border: 1px solid #DDDDDD; border-top: 0; width: 100%; display: none; position: absolute; top: 100%; left: -1px; padding-bottom: 4px;}
#top .topNav ul li{float: none;}
#top .topNav li.hover ul li{border: none;}
#top .topNav li.hover ul li a{height: 25px; line-height: 25px;}
/* -- header -- */
.headerbox{ position: fixed; width: 100%; height: 80px; top: 0; z-index: 999; background: #fff; box-shadow:0 0 3px 0 #ccc; } 
.goTop{position: fixed; bottom:50px;right:50px; display: none; width: 50px; height: 50px; background: #0054a3; color: #fff; line-height: 50px; font-size: 30px; text-align: center; z-index: 999; cursor: pointer;}
#header .logo{ position: relative; padding: 10px 0; float: left; width: 200px; height: 60px;}
#header .logo .switch_l{ position: absolute; top:24px; left:234px; display: block; width: 32px; height: 32px; cursor: pointer; opacity: .8; }

.container-fluid .logo{ float: left;}
.container-fluid .navbar{ float: right;}

/* -- mainNav -- */
.handlebtn{ display: none; background: url(images/icon_head.png) center no-repeat; width: 50px; height: 50px; margin:15px 10px;}
.lang_selectbox{ float:right; font-size: 14px; margin-left: 10px;  }
.lang_selectbox>li{line-height: 40px;}
.lang_selectbox>li>span{ background: url(images/language.png) 20px center no-repeat; background-size: 15px auto; padding-left: 20px; color:#333; display: block; padding: 20px 20px 20px 40px;}
.lang_selectbox .subnav{ position: absolute; top:80px; width: 164px; display: none;}
.lang_selectbox .subnav li{ border-bottom:solid 1px #ddd; }
.lang_selectbox .subnav li:last-child{ border-bottom:none;  }
.lang_selectbox .subnav>li a{ display: block; background: #fff; color: #333; text-align: center; cursor: pointer;}
.lang_selectbox .subnav>li a:hover,.lang_selectbox .subnav>li a.active{ background: #0054a3; color: #fff; text-decoration:none; }
.lang_selectbox>li:hover .subnav{ display: block; top:70px; opacity: 1; }

#mainNav{ display: block; float:right; font-size: 14px; }
/* LEVEL ONE */
#mainNav>li{ position: relative; float: left; transition: all 0.4s ease-out 0s; line-height: 40px; border-left:solid 1px #fff;  }
#mainNav>li>a{color:#333; display: block; padding: 20px;}
#mainNav>li.active, #mainNav>li:hover {background-color: #0054a3; display: inline-block; }
#mainNav>li.active a, #mainNav>li:hover a{ color: #fff; text-decoration:none; }

.fa-angle-down{ display: inline-block; transform: rotate(90deg) translate(2px,0); }
#mainNav>li.active .fa-angle-down, #mainNav>li:hover .fa-angle-down{ color:#fff; }
/* LEVEL TWO */
#mainNav .subnav{ position: absolute; top:80px; left: 50%; transform: translate(-50%,0); width:220px; z-index: 100; transition: top .5s ; opacity: 0; display: none; }
#mainNav .subnav li{ border-bottom:solid 1px #ddd; }
#mainNav .subnav li:last-child{ border-bottom:none;  }
#mainNav .subnav>li a{ display: block; background: #fff; color: #333; text-align: center;}
#mainNav .subnav>li a:hover{ background: #0054a3; color: #fff; }
#mainNav>li:hover .subnav{ display: block; top:70px; opacity: 1; }


/* LEVEL THREE */
.itemnav{left: 100%; top: 0; border-top: 0; _border-top: 1px;}
.itemnav>li a{color: #24313C;}
.itemnav>li.hover a{color: #FFF;}

/* 首页样式
----------------------------------------------- */
/* -- slideShow -- */
.slideShow{position: relative; margin: 0 auto; padding: 0; *zoom: 1;}
.slideShow .slides a{display: block; height:584px; background-repeat: no-repeat; background-position: center center; background-size: auto 100%;}
.slideShow .slideBox{background: #fff; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0);}
/* -- slideLoading -- */
.slideShow .slideLoading{min-height: 50px; background: url(images/slide_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 60;}
/* -- previous 和 next 按钮 -- */
.slideShow .arrowBox a{z-index: 70; font-family: \5b8b\4f53, sans-serif; position: absolute; display: block; margin-bottom: -40px; width: 40px; height: 80px; bottom: 50%; line-height: 80px; text-decoration: none; text-align: center; color: #fff; font-size: 2em; background: rgba(21, 20, 20, 0.3); }
.slideShow .arrowBox a.disabled{display: none;}
.slideShow .arrowBox .arrowPrev{left: 20px;}
.slideShow .arrowBox .arrowNext{right: 20px;}
.slideShow .arrowBox a:hover{background: rgb(48, 93, 195);}
/* -- controlBox -- */
.slideShow .controlBox{display: none; z-index: 70; position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666;}
.slideShow .controlBox .control{display: inline-block; *zoom: 1; *display: inline;}
.slideShow .controlBox.controlDefault a{ text-indent: -9999px; overflow:hidden; clear: none; display: block; width: 12px; height: 12px; border-radius: 50%; background: #aaa; margin: 0 5px;}
.slideShow .controlBox.controlDefault a:hover, .slideShow .controlBox.controlDefault a.active{  background: #f00;}
/* -- slideTitle -- */
.slideShow .slideTitle{z-index: 70; position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80, 80, 80, 0.75); width: 100%;}
.slideShow .slideTitle span{color: #fff; display: block; font-size: .85em; padding: 15px 10px;}
/* -- sileThumb -- */
.slideShow .sileThumb{z-index: 70; text-align: center; position: absolute; bottom: 8px; right: 8px;}
.slideShow .sileThumb a{margin: 0 3px;}
.slideShow .sileThumb a img{border: solid #B0B0B0 1px;}
.slideShow .sileThumb a.active img{border: solid #19B4EA 1px;}


.module{ position: relative; min-width: 1200px;}
.module .header { position: absolute; top:0; right:50%; transform:translate(-400px,0); background: #0065B0; color: #fff; width: 200px;  padding: 10px 0 10px 760px; }
.module .header .title { font-size:24px;  }
.module .header .subtitle{ font-size: 12px; }
.module a.more{ font-size: 18px; color: #0065B0;  }
.module .content{ width: 1200px; margin: 0 auto; }

.mvision{ height: 85px; margin-top: -30px; }
.mvision .header{ background: url(images/vbg.png) no-repeat top right; transform:translate(262px,0); width: 862px; padding-left: 360px;}
.mvision .header .title{ line-height: 65px;  animation: toRight .6s ease-out 0s; animation-fill-mode: forwards; opacity: 0;}
.mvision .header .subtitle{ font-size: 18px;  }

.mproduct{ background: url(images/pbg.png) center no-repeat; height: 753px; padding-top: 100px;}
.mproduct .header{color:#0065B0; background: none; top:90px; animation: toUp_PH .6s ease-out .3s; animation-fill-mode: forwards; opacity: 0;}

.pcategory{ display:flex; width: 1000px; padding-left: 200px; height: 43px; margin-bottom: 45px; animation: toUp .6s ease-out .6s; animation-fill-mode: forwards; opacity: 0;}
.pcategory li{ flex:1; font-size: 16px; border-bottom: solid 1px #ccc; line-height: 40px; text-align: center; cursor: pointer; position: relative; }
.pcategory .item{ display: block; color: #0065B0; text-decoration: none; white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
	margin: 0 auto;}
.pcategory li:hover::after,.pcategory li.hover::after{ content: ''; display: block; width: 120px; height: 5px; background: #0065B0;position: absolute; left:50%; bottom:-3px; transform: translateX(-50%);}
.pcategory .item a{ text-decoration: none; }
.hidebox{ height: 422px; overflow: hidden; animation: toUp .6s ease-out .9s; animation-fill-mode: forwards; opacity: 0;}
.mproduct .content .more{ animation: toUp .6s ease-out 1.2s; animation-fill-mode: forwards; opacity: 0; }
.products{ width: 1240px; overflow: hidden; margin-bottom: 80px; animation: toUp .6s ease-out 1.2s; animation-fill-mode: forwards; opacity: 0;}
.products li{ float: left; width: 270px; margin: 0 40px 40px 0; }
.products a{ text-decoration: none; }
.products .pic{ width: 270px; height: 270px; background: #fff; margin-bottom: 10px; overflow: hidden;}
.products .pic img{ width: 100%; height: 100%; transition: all .3s;}
.products .pic img:hover{ transform: scale(1.1);}
.products .name{ font-size: 16px; }
.products .keywords{ font-size: 20px; margin: 5px 0; }
.products .desc{ font-size: 12px; line-height: 18px; height: 36px; overflow: hidden; display: -webkit-box;  
    -webkit-line-clamp: 2;  
    -webkit-box-orient: vertical;  }

.mcase{ background: url(images/cbg.jpg) center no-repeat; height: 566px; padding-top: 250px; position: relative; z-index: 2; }
.mcase .header { background: none; top:140px; }
.mcase .header.animte { animation: toRight .6s ease-out 0s; animation-fill-mode: forwards; opacity: 0;  }
.cases{ width: 500px; margin-bottom: 40px;}
.cases li{ border-bottom: solid 1px #fff; cursor: pointer; }
.cases li .cinfo{ display: none;  }
.cases li .name{ font-size: 16px; color: #0065B0; line-height: 36px; }
.cases li .name::after{ content: '+'; display: inline-block; float: right; font-size: 16px; width: 20px; text-align: center; color: #0065B0;  font-weight: bold;}
.cases li.hover .cinfo,.cases li:first-child .cinfo{ display: block; padding: 10px; background: rgba(36,67,133,.8);}
.cases .desc{  height: 54px; color: #fff; line-height: 18px; overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; }

.cases li.nohover .cinfo{ display: none !important; }
.cases li.hover .name::after{ content: '-'; font-size: 20px; font-weight: bold; }
.cases li.nohover .name::after{ content: '+'; font-size: 16px; font-weight: bold; }

.mcategory{ margin-top: -30px; height: 102px;}
.mcategory .header{ background: url(images/tbg.png) no-repeat top right; transform:translate(-360px,0); width: 240px; padding-left: 720px; }
.case .mcategory .header{ background: url(images/tbg.png) no-repeat top right; transform:translate(-250px,0); width: 350px; padding-left: 610px; }

.mpinfo{ height: 102px; width: 1200px; margin: -30px auto 0; }
.mpinfo .header{ color: #fff; display: inline-block; padding-right: 15px; position: relative; padding:10px 40px 10px 0; height: 82px; }
.mpinfo .header .bg{ width: 605px; height: 82px; position: absolute; top: 0; right: 0; background: url(images/tbg.png) no-repeat top right; }
.mpinfo .header .title{ display: inline-block; position: relative; font-size: 24px; }
.mpinfo .header .subtitle{ position: relative;  font-size: 14px; display:none; }








/* page
----------------------------------------------- */
.pagebanner{ height: 201px; background: url(images/1.jpg) center no-repeat; }
.page .main{ padding: 0 0 50px; position: relative;}

.page .header p.title { font-size:24px; }
.page .header p.subtitle{ font-size: 14px; display:none; }
.page .content{ position: relative; z-index: 9; width: 1200px; font-size: 14px; line-height: 30px; overflow: hidden; }
.page .pcategory{ width: 1200px; padding: 50px 0 0; display: flex; justify-content: center; }

.page .parentbox{ position: relative; min-width:1200px; overflow: hidden;}
.page .sonbox{ position: relative; left: 50%; transform: translate(-50%,0); width:1920px;  }

.page .sonbox .inside{ width: 1200px; margin: 0 auto; }
.page .sonbox .inside .title{ font-size: 20px; }

/* product_category
----------------------------------------------- */
.productbanner{ height: 201px; background: url(images/3.jpg) center no-repeat; }
.productList{ width: 1230px; overflow: hidden; }
.productList dl{ float: left; width: 277px; margin: 0 30px 30px 0; }
.productList img{ display: block; width:277px; height: 210px; background: #eee; }
.productList .name{ text-align: center; }


/* case_category
----------------------------------------------- */
.casebanner{ height: 201px; background: url(images/4.jpg) center no-repeat; }

.caselist{ padding-bottom:50px; } 
.caselist .caseitem{ position: relative; top:0; width: 1200px; height: 325px; overflow: hidden; margin: 30px 0; font-size: 14px; box-sizing: border-box; padding:80px 50px 0 750px; transition: all .5s;}
.caselist .caseitem:hover{ top:-10px;}
.caselist .caseitem .pic{ position: absolute; top: 0; left: 0; display: block; width: 800px; height: 325px; transform: scale(1); transition: all .5s; }
.caselist .caseitem:hover .pic{ transform: scale(1.1); }
.caselist .caseitem .mask{ position: absolute; top: 0; left: 0; width: 1200px; height: 325px; background: url(images/casebox.png) center no-repeat;}
.caselist .caseitem .title{ position: relative; z-index: 2; font-size: 18px; color:#0054A3; text-align: right; }
.caselist .caseitem .desc{ position: relative; z-index: 2; font-size: 14px; line-height: 24px; height: 72px; margin-bottom: 30px; text-align: justify; }
.caselist .caseitem .more{ position: relative; z-index: 2; display: block; font-size: 18px; color:#0054A3;}
.caselist .caseitem a{ text-decoration: none;}

.caselist .caseitem:nth-child(even){ padding:80px 750px 0 50px; }
.caselist .caseitem:nth-child(even) .pic{ left: auto; right: 0; }
.caselist .caseitem:nth-child(even) .mask{ transform: rotate(180deg); }
.caselist .caseitem:nth-child(even) .title{ text-align: left; }
.caselist .caseitem:nth-child(even) .more{ text-align: right; }
.caselist .caseitem:nth-child(1){ animation: toRight .6s ease-out 0s; animation-fill-mode: forwards; opacity: 0; }
.caselist .caseitem:nth-child(2){ animation: toLeft .6s ease-out .3s; animation-fill-mode: forwards; opacity: 0; }
.caselist .caseitem:nth-child(3){ animation: toRight .6s ease-out .6s; animation-fill-mode: forwards; opacity: 0; }
.caselist .caseitem:nth-child(4){ animation: toLeft .6s ease-out .9s; animation-fill-mode: forwards; opacity: 0; }
.caselist .caseitem:nth-child(5){ animation: toRight .6s ease-out 1.2s; animation-fill-mode: forwards; opacity: 0; }
.caselist .caseitem:nth-child(6){ animation: toLeft .6s ease-out 1.5s; animation-fill-mode: forwards; opacity: 0; }

/* case
----------------------------------------------- */


/* article_category
----------------------------------------------- */
.newsbanner{ height: 201px; background: url(images/2.jpg) center no-repeat; }
.articlelist{ margin: 30px 0; }
.articlelist dd{ position: relative; border-bottom:1px dotted #ccc; overflow: hidden; animation: toUp .6s ease-out 0s; animation-fill-mode: forwards; opacity: 0; }
.articlelist dd:nth-child(2){ overflow: hidden; animation: toUp .6s ease-out .3s; animation-fill-mode: forwards; opacity: 0; }
.articlelist dd:nth-child(3){ overflow: hidden; animation: toUp .6s ease-out .6s; animation-fill-mode: forwards; opacity: 0; }
.articlelist dd:nth-child(4){ overflow: hidden; animation: toUp .6s ease-out .9s; animation-fill-mode: forwards; opacity: 0; }
.articlelist dd a{ display: block; padding: 25px 0; height: 140px; text-decoration: none; }
.articlelist dd a:hover{ background: #fcfcfc; }
.articlelist dd a .img img{ transition: all .5s; }
.articlelist dd a:hover .img img{  transform: scale(1.1); }
.articlelist .img{ float: left; width: 228px; height: 140px; overflow:hidden; margin-right: 30px; }
.articlelist h4{ font-size: 18px; font-weight: normal; margin-bottom: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.articlelist p{ color: #999; line-height: 26px; overflow: hidden; height: 78px; overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; }

.articlelist .click{ position: absolute; right: 3px; bottom:25px; display: block; width: 60px; text-align: center; background: #eee;  }

.articlelist .time{  color: #ddd; }

/* article
----------------------------------------------- */
.newsmain{ overflow: hidden; margin-bottom: 30px;}
.newsmain .img{ float: left; margin-right: 20px;}
.newsmain h1{color: #333; font-size: 24px; font-weight: normal;}
.newsmain .info{padding: 2px 0 20px 0; color: #999999; font-size: 13px;}

/* 提示信息
----------------------------------------------- */
#douMsg{padding: 10px 0 100px 0;}
#douMsg dl{padding: 160px 0 200px 0; text-align: center; border: 1px solid #E4E4E4;}
#douMsg dt{color: #0072C6; font-size: 16px; margin-bottom: 30px; font-weight: bold;}
#douMsg dd{color: #666;}
#douMsg dd a{margin-left: 5px; color: #000;}
/* 全局样式
----------------------------------------------- */
/* -- common -- */
.captcha{text-transform: uppercase;}
#vcode{cursor: pointer;}
.clear{clear: both; height: 0; line-height: 0; font-size: 0;}
.none{display: none;}
.cue{color: red; font-size:12px;}
.price{color: #CC0000;}
/* -- form -- */
.btn{display: inline-block; background-color: #0072C6; color: #EEE; padding: 6px 25px; text-transform: capitalize; cursor: pointer; font-weight: bold; text-align:center; -webkit-appearance: none;}
.btn:hover{text-decoration: none; color: #FFFFFF; background-color: #007AD5;}
.btnGray{display: inline-block; background-color: #CCC; border: 0; color: #333; padding: 6px 15px; text-transform: capitalize; cursor: pointer; font-weight: bold; -webkit-appearance: none;}
.btnPayment{display: inline-block; background-color: #ff4246; color: #FFF; padding: 7px 28px; text-transform: capitalize; cursor: pointer; font-weight: bold; font-size:14px; text-align:center; -webkit-appearance: none;}
/* -- input -- */
.textInput{height: 20px; padding: 6px; font-size: 14px; border: 1px solid #DDD; background-color:#F4F4F4; color:#666; -webkit-appearance: none;}
.textArea{padding: 4px; border: 1px solid #DDDDDD; background-color:#F4F4F4; line-height: 20px; -webkit-appearance: none;}
.textAreaAuto{border: 1px solid #DBDBDB; background-color:#F4F4F4; padding: 0; font-size: 12x; line-height: 20px; resize: none; min-height: 40px; -webkit-appearance: none;}
/* -- incBox -- */
.incBox{margin-bottom: 15px;}
.incBox h3{height: 35px; line-height: 35px; color: #7A7F81; font-weight: bold; font-size: 14px; border-bottom: 1px solid #CBD1D3;}
.incBox h3 a{color: #7A7F81;}
/* -- urHere -- */
.urHere{height: 35px; line-height: 35px; margin:10px 0;  color: #999999;  font-size: 14px; position: relative; top: -35px; z-index: 99; float: right; }
.urHere a{color: #999999;}
.urHere b{margin: 0 8px;}
/* -- tree -- */
.treeBox{margin-bottom: 15px;}
.treeBox h3{height: 35px; line-height: 35px; color: #7A7F81; font-weight: bold; font-size: 14px; border-bottom: 1px solid #CBD1D3;}
.treeBox li{border-left: 4px solid #F4F4F4; line-height: 15px; margin-top: 15px; padding-left: 10px;}
.treeBox li.cur{border-left: 4px solid #19B4EA;}
.treeBox li a{color: #7A7F81;}
.treeBox .search{margin:20px 0;}
.treeBox .search .keyword{width: 136px;}
/* -- searchBox -- */
.searchBox{ background-color: #FFF; height: 30px; padding-left: 10px;}
.searchBox{position: relative; white-space: normal}
.searchBox label{height: 0; line-height: 0; overflow: hidden; width: 0; position: absolute; font-size: 0; z-index: -1; outline: 0}
.searchBox .keyword{color: #CCCCCC; width: 150px;}
.searchBox .keyword:focus{color: #555}
.searchBox .keyword::-webkit-input-placeholder{color:#CCCCCC;}
.searchBox .keyword:focus:-moz-placeholder, .searchBox .keyword:focus::-moz-placeholder{color:transparent!important}
.searchBox .keyword:focus::-webkit-input-placeholder{color:transparent!important}
.searchBox .btnSearch{background: #E0E0E0 url(images/btn_search.gif) no-repeat; width: 28px; height: 28px; text-indent: -999px; overflow:hidden; cursor: pointer;}
/*- tableBasic -*/
.tableBasic{color: #666666; border-left: 1px solid #DDDDDD; border-top: 1px solid #DDDDDD; border-collapse: collapse;}
.tableBasic select{color: #8F8F8F;}
.tableBasic td, .tableBasic th{border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;}
.tableBasic th{background-color: #EFEFEF;}
.tableBasic .child{background-color: #FFFFFF;}
.tableBasic td label{margin-right:15px;}
.tableBasic td i{color:#F00; margin-left:5px; font-weight:bold;}
/*- tableDiv -*/
.tableDiv dl{zoom:1; overflow:hidden; margin-bottom:15px;}
.tableDiv dl dt{float:left; width:160px; text-align:right; line-height:34px; font-size:13px;}
.tableDiv dl dd{float:left; width:640px; padding-left:10px;}
.tableDiv dl dd i{color:#F00; margin-left:5px; font-weight:bold;}
.tableDiv dl dd label{margin-right: 15px; line-height:34px;}
/* -- lift -- */
.lift{margin-top:30px; color:#999; font-size: 14px;}
.lift a{color:#999;}
.lift span{margin-right:15px;}
/* -- pager -- */
.pager{text-align: right; padding-top: 20px; color: #666;}
.pager a{color: #666; text-decoration: underline;}

.newpager{ text-align: center; }
.newpager .page{ display:inline-block; margin: 0 5px; width: 40px; height: 40px; font-size: 18px; line-height: 40px; text-align: center; color: #666; cursor: pointer; background: #f2f2f2;  }
.newpager .page:hover{ color: #ffffff; background: #0065B0; text-decoration: none; }
.newpager .page.currpage { color: #ffffff; background: #0065B0; cursor: default; text-decoration: none;}
/* -- douBox -- */
#douBox .boxBg{position: fixed; top: 0; left: 0; z-index: 10000001; width: 100%; height: 100%; background: #000; filter: alpha(opacity=15); opacity:0.15}
#douBox .boxFrame{position: absolute; z-index: 10000002; overflow: hidden; padding: 0; border: 2px solid #C4C4C4; background-color:#FFF; width:360px; left:50%; top:300px; margin-left:-180px;}
#douBox .boxFrame h2{height: 28px; padding: 0 10px; background: #f5f5f5; line-height: 28px; color: #666; font-size:14px; font-weight:normal;}
#douBox .boxFrame h2 .close{background: url(images/icon_fork.png) no-repeat; width:12px; height:12px; display:block; float:right; text-indent:-9999px; margin-top:8px;}
#douBox .boxFrame .boxCon{background: url(images/icon_exclamation.png) no-repeat 15px 15px; padding:13px 10px 15px 70px; height:100px;}
#douBox .boxFrame .boxCon dt{font-family:Microsoft YaHei; font-size:16px; color:#19B4EA; font-weight:bold;}
#douBox .boxFrame .boxCon dd{color:#999; zoom:1; overflow:hidden;}
#douBox .boxFrame .boxCon dd a{background-color:#F5F5F5; border: 1px solid #CBD1D3; display:block; float:left; width:70px; line-height:26px; text-align:center; margin:10px 12px 0 0; text-decoration:none;}
/* -- onlineService -- */
#onlineService{position: fixed; _position: absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-380+"px"); top: 208px; right: 0; z-index: 999999; display: block;}
#onlineService .onlineIcon{position: relative; cursor: pointer; background: url(images/online_service.png) no-repeat; width: 34px; height: 110px; text-indent: -9999px; overflow:hidden;}
#onlineService #pop{border: 3px solid #19B4EA; background-color: #F2F2F2; padding: 8px; width: 95px; min-height: 84px; position: absolute; right: 34px; top: 0; display: none; z-index: 999999;}
#onlineService .onlineQQ a{display: block; background: url(images/online_service.png) no-repeat left -160px; color: #19B4EA; width: 82px; height: 24px; line-height: 23px; padding-left: 27px; margin-bottom: 8px;}
#onlineService .onlineQQ a:hover{text-decoration: none; color: #19B4EA;}
#onlineService .service{border-top: 1px solid #DDDDDD; padding-top: 8px; color: #666;}
#onlineService .service a{color: #666;}
#onlineService .service li{background: url(images/online_service.png) no-repeat left -202px; padding-left: 8px;}
#onlineService .goTop{display: none;}
#onlineService .goTop .goBtn{background: #F2F2F2 url(images/online_service.png) no-repeat left -120px; width: 34px; height: 34px; display: block;}
/* footer
----------------------------------------------- */
#footer{ position: relative; background: #0054a3; margin-top:100px; padding: 40px 0; border-top:solid 30px #eee; line-height: 24px; color: #fff; }
#footer .fbg{ position: absolute; bottom: 0; right: 0; width: 960px; height: 479px; background: url(images/fbg.png) no-repeat right; z-index: 9; }
#footer .wrap{ position:relative; z-index: 11; }
#footer .wrap::after{ content: "";display: block; clear: both; }
#footer a{color: #fff;}
#footer .footNav{ float: left; width: 770px; overflow: hidden;}
#footer .item{ float:left; margin-right: 35px; line-height: 20px;}
#footer .item a{ display: block; font-size: 12px;  line-height: 24px; }
#footer .item .title,.footcontact .title,.footabout .title{ font-size: 16px; font-weight: bold; margin-bottom: 10px; color: #fff; }

.footcontact{float: left; width: 300px; margin-right: 30px; font-size: 12px; }
.footabout{position: relative; z-index: 2; float: left; width: 100px; text-align: center;}
.footabout img{width: 100px; height: 100px;}
.copyRight{ background-color: #f3f3f3; color: #aaa; font-family: Arial, Lucida, Verdana, Helvetica, sans-serif; padding:10px 0; }

 
 
 @-webkit-keyframes fadeInUp {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(0,100%,0);
         transform: translate3d(0,100%,0)
     }
     100% {
         opacity: 1;
         -webkit-transform: none;
         transform: none
     }
 }
 
 @keyframes fadeInUp {
     0% {
         opacity: 0;
         -webkit-transform: translate3d(0,100%,0);
         transform: translate3d(0,100%,0)
     }
     100% {
         opacity: 1;
         -webkit-transform: none;
         transform: none
     }
 }
 @-webkit-keyframes slideInUp {
     0% {
         -webkit-transform: translate3d(0,100%,0);
         transform: translate3d(0,100%,0);
         visibility: visible
     }
     100% {
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0)
     }
 }
 
 @keyframes slideInUp {
     0% {
         -webkit-transform: translate3d(0,100%,0);
         transform: translate3d(0,100%,0);
         visibility: visible
     }
     100% {
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0)
     }
 }
 
 
 

 

 @keyframes toRight{
 	0%{ opacity: 0; transform: translate(-30px,0);}
 	100%{ opacity: 1; transform: translate(0,0);}
 } 
 @keyframes toLeft{
 	0%{ opacity: 0; transform: translate(30px,0);}
 	100%{ opacity: 1; transform: translate(0,0);}
 } 
 
 @keyframes toUp{
 	0%{ opacity: 0; transform: translate(0,30px);}
 	100%{ opacity: 1; transform: translate(0,0);}
 } 
 @keyframes toUp_PH{
 	0%{ opacity: 0; transform: translate(-400px,30px);}
 	100%{ opacity: 1; transform: translate(-400px,0);}
 } 
 @keyframes toUp_PH2{
 	0%{ opacity: 0; transform: translate(-280px,30px);}
 	100%{ opacity: 1; transform: translate(-280px,0);}
 } 
 
 /* 大事记特殊动效 */
 .page_19 .content tr:nth-child(1){ animation: toUp .6s ease-out 0s; animation-fill-mode: forwards; opacity: 0; }
 .page_19 .content tr:nth-child(2){ animation: toUp .6s ease-out .3s; animation-fill-mode: forwards; opacity: 0; }
 .page_19 .content tr:nth-child(3){ animation: toUp .6s ease-out .6s; animation-fill-mode: forwards; opacity: 0; }
 .page_19 .content tr:nth-child(4){ animation: toUp .6s ease-out .9s; animation-fill-mode: forwards; opacity: 0; }
 .page_19 .content tr:nth-child(5){ animation: toUp .6s ease-out 1.2s; animation-fill-mode: forwards; opacity: 0; }
 .page_19 .content tr:nth-child(6){ animation: toUp .6s ease-out 1.5s; animation-fill-mode: forwards; opacity: 0; }
 .page_19 .content tr:nth-child(7){ animation: toUp .6s ease-out 1.8s; animation-fill-mode: forwards; opacity: 0; }
 .page_19 .content tr:nth-child(8){ animation: toUp .6s ease-out 2.1s; animation-fill-mode: forwards; opacity: 0; }
 .page_19 .content tr:nth-child(9){ animation: toUp .6s ease-out 2.4s; animation-fill-mode: forwards; opacity: 0; }
 .page_19 .content tr:nth-child(10){ animation: toUp .6s ease-out 2.7s; animation-fill-mode: forwards; opacity: 0; }
 .timelinebox{position: relative; }
 .timelinemask{ position: absolute; top: 0; left: 0; width: 100%; text-align: center; }
 
 .timelines{ position: relative; min-height: 300px; line-height: 20px;}
 .timelines::before{ content: ''; display: block; position: absolute; top:0;left:50%; bottom: 0; width: 1px; background: #eee;}
 .timelines .item{ position: relative; padding: 15px 0; text-align: left; display: flex; align-items: center; height: 100px;  }
 .timelines .item::before{ content: ''; display: block; width: 30px; height: 1px; background: #eee; }
 .timelines .item::after{ content: ''; display: block; width: 19px; height: 19px; background: url(images/dot.jpg); position: absolute; }
 .timelines .item .year{ position: absolute; top:0; left: -100px; bottom:0; display: flex; align-items: center; font-size: 30px; font-weight: bold; }
 .timelines .item .month{  width: 75px; font-size: 24px; }
 .timelines .item .text{  max-width: 50%; text-align: left; }
 .timelines .item .pic{ opacity: 0; transition: opacity 1s; }
 .timelines .item:hover .pic{ opacity: 1; }
 
 
 
 .timelines .item:nth-child(even){ margin: 0 0 0 50%; text-align: left; }
 .timelines .item:nth-child(even)::before{ margin: 0 20px 0 0; }
 .timelines .item:nth-child(even)::after{ left: -9px; right: auto;}
 .timelines .item:nth-child(even) .year{ top:0; right:auto; bottom:0; left: -100px; }
 .timelines .item:nth-child(even) .text{ margin: 0 20px 0 0; }
 
 .timelines .item:nth-child(odd){ margin: 0 50% 0 0; text-align: right; flex-direction: row-reverse;}
 .timelines .item:nth-child(odd)::before{ margin: 0 0 0 20px; }
 .timelines .item:nth-child(odd)::after{ left: auto; right: -9px;}
 .timelines .item:nth-child(odd) .year{ top:0; right: -100px; bottom:0; left:auto; }
 .timelines .item:nth-child(odd) .text{ margin: 0 0 0 20px; }


 /* 自适应 */
 @media (max-width: 1200px) {
	#wrapper{ min-width: 960px; overflow: hidden;}
 	#wrapper .wrap{width: 960px; margin: 0px auto;}
	#wrapper .wrap img{width: 100%;}
 	#mainNav>li>a{ padding: 20px 15px;}
	.module{ min-width: 960px;} 
	.module .content{ width: 960px; margin: 0 auto; }
	.slideShow .slides a{ height: 438px;}
	
	
	.module .header{ transform: translate(-280px,0); }
	.mvision .header{ transform: translate(262px,0); width: 742px; padding-left:480px; }
	.mproduct .header{ animation: toUp_PH2 .6s ease-out .3s; animation-fill-mode: forwards; opacity: 0;}
	.mcategory .header{ transform: translate(-280px,0); width: 200px;  }
	.pcategory { width: 800px; padding-left: 160px;}
	
	#footer .footNav{ margin-bottom: 30px;}
	
	.page .content{ width: 960px;}
	.page .content img{ width: 100%;}
	.page .parentbox { min-width: 960px; }
	.page .sonbox .inside,.page .pcategory{ width: 960px; }
	.articlelist .time{ top: auto; bottom: 0; }
	
	.products{ width: 1000px;}
	.products li{ width: 210px;}
	.products .pic{ width: 210px; height: 210px;}
	
	
	.caselist .caseitem .pic{ width: 800px !important; }
	.caselist .caseitem .mask{ width: 960px; background: rgba(0,0,0,.5); }
	.caselist .caseitem{ width: 960px; padding:80px 50px 0 630px;}
	.caselist .caseitem:nth-child(even){ padding:80px 630px 0 50px; }

	
	
	.mpinfo{ width: 960px;}
	.case .mcategory .header{ transform: translate(-150px,0); width: 340px; padding-left: 630px;}
	.pcategory .item{ max-width: 150px;}
 }
 
 @media (max-width: 960px) {
 	#wrapper{ min-width: auto; width: 100%;}
 	#wrapper .wrap{width: 100%; margin: 0px auto;}
 	
	#header .logo{ padding: 10px; }
	.handlebtn{ display: block; float: right;}
	.navbox{    overflow: scroll;
    position: fixed;
    width: 100%;
    top: 80px;
    bottom: 0;}
	.navbox{display:none;}
	#mainNav{ width: 100%; }
	#mainNav>li{ float: none; background: #eee;}
	#mainNav>li>a{ padding: 0 10px; border-bottom: solid 1px #ccc; font-weight: bold;}
	#mainNav>li.active, #mainNav>li:hover {display: block; }
	#mainNav>li.active{ background: #eee; display: block; }
	#mainNav>li.active a{ color: #333;  } 
	#mainNav .subnav{ display: block; position:static; width: 100%; transform: translate(0,0); opacity: 1; overflow: hidden; background: #fff;}
	#mainNav .subnav li{ float: left; width: 50%;}
	#mainNav .subnav>li a{ display: block; color: #333;}
	
	.slideShow .slides a{ height: 292px;}
	
	.mpinfo{ width: 100%;}
	.mpinfo .header{ left: 3%;}
	.urHere{ float: none; padding: 0 3%;}
	
	.module{ min-width: auto;}
	.module .header{ position: static; transform: translate(0,0);  padding: 0; text-align: center; }
	.module .content{ width: 100%; }
	.mvision{ margin: 0; height: auto;}
	.mvision .header{ transform: translate(0,0); width: 100%; padding-left:0; background:#0065b0; }
	.module .header .title{ font-size: 20px; text-align: center; line-height: 30px; }
	.mvision .header .title{ padding:10px; display: block; text-align: center; line-height: 30px; }
	.module .header .subtitle{ text-align: center; }
	.module .header p{ display: inline-block; }

	.mcategory .header{ padding: 10px; background: #0065B0; width: 100%;}
	.case .mcategory .header{ padding: 10px; background: #0065B0; width: 100%; transform: translate(-0,0);}
	.mcategory .header .title{ display: block; text-align: center; }
	.case .mcategory .header .title{ display: block; text-align: center; }
	
	.mproduct{ height: 803px; padding-top: 50px;}
	.pcategory{ width: 100%; padding: 0; display: block; height: auto;}
	.hidebox{ height: 325px;}
	.products{ width: 90%; marg